<template>
  <view class="wrap">
    <image :src="$z.imgsrc('my-bg.png')" class="bg"></image>
    <!--  -->
    <view class="content">
      <view class="user" @click="onPage('/pages/my/my-info')">
        <view class="left">
          <view class="headerUrl">
            <image :src="imageUrl" class="imageUrl"></image>
          </view>
          <view class="userInfo">
            <view class="userName">{{ userInfo.name }}</view>
            <view class="userDes">
              <view class="userPost">业务员</view>
              <view class="split"></view>
              <view class="userPhone">{{ userInfo.phone }}</view>
            </view>
          </view>
        </view>
        <image :src="$z.imgsrc('arrow.png')" class="arrow" />
      </view>
      <!-- 统计 -->
      <view class="statistics-wrap">
        <u-row justify="space-between" gutter="10">
          <u-col span="6">
            <view
              class="statistics-item"
              @click="onPage('/pagescustomer/customer/my-customer')"
            >
              <image
                class="item-icon"
                :src="$z.imgsrc('my-total1.png')"
              ></image>
              <view class="item-content">
                <view class="item-lable">客户总数</view>
                <view class="item-value">{{ info.customCount }}</view>
              </view>
            </view>
          </u-col>
          <u-col span="6">
            <view class="statistics-item">
              <image
                class="item-icon"
                :src="$z.imgsrc('my-total2.png')"
              ></image>
              <view class="item-content">
                <view class="item-lable">日程数量</view>
                <view class="item-value">{{ info.itineraryCount }}</view>
              </view>
            </view>
          </u-col>
        </u-row>
        <u-row justify="space-between" gutter="10">
          <u-col span="6">
            <view
              class="statistics-item"
              @click="onPage('/pagescustomer/customer/order-list')"
            >
              <image
                class="item-icon"
                :src="$z.imgsrc('my-total3.png')"
              ></image>
              <view class="item-content">
                <view class="item-lable">订单数</view>
                <view class="item-value">{{ info.orderCount }}</view>
              </view>
            </view>
          </u-col>
          <u-col span="6">
            <view class="statistics-item">
              <image
                class="item-icon"
                :src="$z.imgsrc('my-total4.png')"
              ></image>
              <view class="item-content">
                <view class="item-lable">订单总金额</view>
                <view class="item-value">{{ info.orderAmount }}</view>
              </view>
            </view>
          </u-col>
        </u-row>
      </view>
      <!-- 快捷方式 -->
      <view class="shortcuts">
        <view
          v-for="(item, index) in list"
          :key="index"
          class="shortcuts-item"
          @click="onHandle(item)"
        >
          <view class="left">
            <image :src="$z.imgsrc(item.icon)" class="shortcuts-icon"></image>
            <view class="shortcuts-title">{{ item.title }}</view>
          </view>
          <image :src="$z.imgsrc('arrow.png')" class="arrow" />
        </view>
      </view>
      <!-- 客服电话 -->
      <u-popup :show="show" @close="close" :round="17">
        <view class="phone-wrap">
          <text class="phone-title">客服电话</text>
          <view class="btn-wrap">
            <u-button
              type="primary"
              size="large"
              text="服务电话"
              icon="phone"
              color="#DC2626"
              style="width: 50%"
              @click="callPhone(userInfo.phone)"
            ></u-button>
          </view>
        </view>
      </u-popup>
    </view>
    <tabbar></tabbar>
  </view>
</template>

<script>
import { getUserInfo, CRMMyMain } from "@/apis/user";
import { setUserInfo } from "@/config/storage";
export default {
  data() {
    return {
      userInfo: {},
      list: [
        {
          id: 1,
          title: "客服电话",
          icon: "my-shortcuts1.png",
        },
        // {
        //   id: 2,
        //   title: "反馈",
        //   icon: "my-shortcuts2.png",
        //   path: "",
        // },
        {
          id: 3,
          title: "设置",
          icon: "my-shortcuts3.png",
          path: "/pages/my/my-info",
        },
      ],
      show: false,
      info: {}
    };
  },
  computed: {
    imageUrl() {
      return this.$z.imgsrc("header-url.png");
    },
  },
  async mounted() {
    this.getInfo();
    const data = await CRMMyMain()
    this.info = data || {}
    console.log(999, data)
//     customCount: "0"
// itineraryCount: "0"
// orderAmount: "0"
// orderCount: 0
  },
  methods: {
    // 获取用户信息
    async getInfo() {
      const res = await getUserInfo();
      setUserInfo(res.sysUser);
      this.userInfo = res.sysUser;
    },
    onHandle(item) {
      if (item.id === 1) {
        this.show = true;
        return;
      }
      uni.navigateTo({
        url: item.path,
      });
    },
    close() {
      this.show = false;
    },
    // 跳转我的页面
    onPage(path) {
      uni.navigateTo({
        url: path,
      });
    },
    callPhone(phoneNumber) {
      uni.makePhoneCall({
        phoneNumber: phoneNumber, // 电话号码
        success: function () {
          console.log("拨号成功");
        },
        fail: function () {
          console.log("拨号失败");
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.wrap {
  background: #f2f4f5;
  min-height: 100vh;
}

.content {
  position: absolute;
  top: 207rpx;
  left: 0;
  width: 100%;
}

.user {
  display: flex;
  padding: 0 32rpx 42rpx;
  justify-content: space-between;

  .left {
    display: flex;
  }

  .arrow {
    width: 36rpx;
    height: 36rpx;
    align-self: flex-end;
    margin-bottom: 20rpx;
  }
}

.headerUrl {
  width: 126rpx;
  height: 126rpx;
  border-radius: 60rpx;
  border: 2rpx solid #ffffff;
  margin-right: 24rpx;
  overflow: hidden;

  .imageUrl {
    width: 100%;
    height: 100%;
  }
}

.userInfo {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.userName {
  font-size: 38rpx;
  color: #1f1f1f;
  line-height: 53rpx;
}

.phone-wrap {
  padding: 30rpx;

  .phone-title {
    display: block;
    font-weight: 500;
    font-size: 32rpx;
    color: #1c1d1f;
    line-height: 45rpx;
    margin-bottom: 47rpx;
  }

  .btn-wrap {
    width: 100%;
    display: inline-block;
    overflow: hidden;
    border-radius: 8rpx;
  }
}

.userDes {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 13rpx;
  border: 1rpx solid #ffffff;
  line-height: 58rpx;
  padding: 0 16rpx;

  .userPost,
  .userPhone {
    font-size: 26rpx;
    color: #1f1f1f;
    display: inline-block;
  }

  .split {
    display: inline-block;
    margin: 0 18rpx;
    width: 3rpx;
    height: 18rpx;
    background: #c1c5c9;
    border-radius: 3rpx;
  }
}

.statistics-wrap {
  padding-left: 24rpx;
  padding-right: 24rpx;
}

.statistics-item {
  height: 141rpx;
  background: #ffffff;
  border-radius: 14rpx;
  margin-bottom: 22rpx;
  padding: 20rpx 30rpx;
  box-sizing: border-box;
  display: flex;

  .item-icon {
    width: 47rpx;
    height: 47rpx;
    margin-right: 24rpx;
  }

  .item-lable {
    font-size: 26rpx;
    color: #838589;
    line-height: 37rpx;
  }

  .item-value {
    font-size: 38rpx;
    color: #121e2c;
    line-height: 52rpx;
  }
}

.shortcuts {
  padding-left: 24rpx;
  padding-right: 24rpx;

  .shortcuts-item {
    height: 120rpx;
    background: #ffffff;
    border-radius: 14rpx;
    margin-bottom: 22rpx;
    padding-left: 30rpx;
    padding-right: 15rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .left {
    display: flex;
    align-items: center;
  }

  .shortcuts-title {
    font-weight: 500;
    font-size: 26rpx;
    color: #121e2c;
    line-height: 37rpx;
  }

  .shortcuts-icon {
    width: 47rpx;
    height: 47rpx;
    margin-right: 24rpx;
  }

  .arrow {
    width: 36rpx;
    height: 36rpx;
  }
}
</style>
